import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { MatSidenav, MatSnackBar, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { HttpErrorResponse } from '@angular/common/http';

import { BlogService } from '../../blog.service';
import { AuthService } from '../../auth.service';

@Component({
  selector: 'app-blog-panel',
  templateUrl: './blog-panel.component.html',
  styleUrls: ['./blog-panel.component.scss']
})
export class BlogPanelComponent implements OnInit {
  @ViewChild(MatSidenav) sidenave: MatSidenav;
  dirs: any[];
  markedDir: string;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    public dialog: MatDialog,
    public snackBar: MatSnackBar,
    private blogService: BlogService,
    public authService: AuthService
  ) { }

  ngOnInit() {
    this.blogService
      .getDirs()
      .subscribe(dirs => this.dirs = dirs);
  }

  getSideNavMode(): string {
    if (this.isMobile()) {
      return "over";
    }
    return "side";
  }

  isMarkedDir(dir: string): boolean {
    return dir == this.markedDir;
  }

  isDefaultOpen(): boolean {
    if (this.isMobile()) {
      return false;
    }
    return true;
  }

  isMobile(): boolean {
    return this.blogService.isMobile();
  }

  close(): void {
    if (this.isMobile()) {
      this.sidenave.close();
    }
  }

  openAddBlogDialog(): void {
    let dialogRef = this.dialog.open(AddBlogDialog, {
      data: {
        dir: "",
        file: ""
      }
    });

    dialogRef.afterClosed()
      .subscribe(result => this.createBlog(result.dir, result.file));
  }

  createBlog(dir: string, file: string): void {
    this.blogService
      .createFile(dir, file)
      .subscribe(
        createResult => this.blogService
          .getDirs()
          .subscribe(dirs => {
            this.markedDir = dir;
            this.dirs = dirs;
            this.router.navigate([dir, file + ".md"]);
            this.snackBar.open("创建成功！", "", {
              duration: 600
            });
          }),
        (err: HttpErrorResponse) => this.handleError(err)
      );
  }

  handleError(err: HttpErrorResponse): void {
    if (err.error instanceof Error) {
      this.snackBar.open(err.error.message, "", {
        duration: 1000,
      });
    } else {
      this.snackBar.open(err.status + " " + err.statusText, "", {
        duration: 1000,
      });
    }
  }

  onDeleted(isDeleted: boolean) {
    if (isDeleted) {
      this.blogService
        .getDirs()
        .subscribe(dirs => {
          this.dirs = dirs;
          this.router.navigate(['']);
          this.snackBar.open("删除成功！", "", {
            duration: 600
          });
        })
    }
  }
}

@Component({
  selector: 'add-blog-dialog',
  templateUrl: './add-blog-dialog.html',
  styleUrls: ['./add-blog-dialog.scss']
})
export class AddBlogDialog {

  constructor(
    public dialogRef: MatDialogRef<AddBlogDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }
}
